<template>
	<view class="bgbg">
		<image :src="ancestralInfo.img" mode="aspectFill"></image>
		<view class="jz flex-center"  @click="goinfo2">祭祖</view>
		<view class="contentinfo">
			<view class="title">{{ancestralInfo.name}}-{{ancestralInfo.address}}</view>
			<view class="ctinfo">{{ancestralInfo.introduce}}</view>
		</view>
	</view>
	<view class="contentinfo contentinfo2">
		<view class="ctinfo">{{ancestralInfo.introduce}}</view>
	</view>

	<scroll-view :scroll-x="true" class="tabsbg">
		<view v-for="item in tanghaoList" :key="item.id" @click="settitindex(item.id)"
			:class="tanghaoId==item.id?'tabsitem active':'tabsitem'">{{item.name}}</view>
	</scroll-view>

	<view class="cttit">
		<text>祠堂牌位</text>
		<view class=""></view>
	</view>
	<view class="listbg">
		<view class="listitem" @click="goinfo(item.id,item.name)" v-for="item in list" :key="item.id">
			<view class="topbox">
				<image :src="item.img" mode="aspectFill" lazy-load></image>
				<view class="">{{item.name}}</view>
			</view>
			<view class="btn flex-center">祭祖</view>
		</view>

	</view>

	<up-loadmore lineColor="#ccc" line :status="status" />
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';

	import {
		tangHaoList,
		tabletList
	} from "@/api/ancestra.js"

	let ancestralInfo = ref({
		img: '',
		name: '',
		address: '',
		introduce: ''
	})
	onMounted(() => {
		ancestralInfo.value = uni.getStorageSync('ancestralInfo')
		gettanghao()
	})

	let tanghaoList = ref([])
	let tanghaoId = ref(0)

	function gettanghao() {
		tangHaoList({
			pageNum:1,
			pageSize: 999,
			id: ancestralInfo.value.id
		}).then(res => {
			tanghaoList.value = res.rows
			if (res.rows.length) {
				tanghaoId.value = res.rows[0].id
				getpaiweiList()
			}
		})
	}



	onReachBottom(() => {
		page.value++
		getpaiweiList()
	})


	let titindex = ref(0)

	function settitindex(e) {
		tanghaoId.value = e
		page.value = 1
		list.value = []
		getpaiweiList()
	}

	let status = ref('')

	let list = ref([])

	let page = ref(1)

	function getpaiweiList() {
		let data = {
			tangHaoId: tanghaoId.value,
			pageSize: 10,
			pageNum: page.value,
		}
		status.value = 'loading'
		tabletList(data).then(res => {
			status.value = 'nomore'
			if (page.value == 1) {
				list.value = res.rows
			} else {

				if (res.rows.length == 0) {
					page.value--
					return
				} else {
					list.value = [...list.value, ...res.rows]
				}
			}
		})

	}

	function getTanghaoName(e) {
		let name = ''
		tanghaoList.value.forEach(item => {
			if (item.id == e) {
				name = item.name
			}
		})
		return name
	}
    function goinfo2(){
		let data = {
			ancestralId: ancestralInfo.value.id,
			ancestralName: ancestralInfo.value.name,
		}
		data = JSON.stringify(data)
		
		uni.navigateTo({
			url: "/pages/goods/list?data=" + data
		})
	}

	function goinfo(tid, tname) {
		let data = {
			ancestralId: ancestralInfo.value.id,
			ancestralName: ancestralInfo.value.name,
			tanghaoId: tanghaoId.value||'',
			tanghaoName: getTanghaoName(tanghaoId.value)||'',
			tabletId: tid || '',
			tabletName: tname||'',
		}
		data = JSON.stringify(data)

		uni.navigateTo({
			url: "/pages/goods/list?data=" + data
		})
	}
</script>

<style lang="scss" scoped>
	.tabsbg {
		width: 750rpx;
		white-space: nowrap;

		.tabsitem {
			margin-left: 30rpx;
			width: 166rpx;
			height: 80rpx;
			display: inline-flex;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;
			color: #C0C0C0;
			border: 1rpx solid #FFFFFF;
		}

		.active {
			border: 1rpx solid #111111;
			color: #111111;
		}
	}

	.listbg {
		display: flex;
		flex-wrap: wrap;

		.listitem {
			margin-top: 30rpx;
			width: 218rpx;
			margin-left: 24rpx;
			height: 388rpx;

			.topbox {
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;

				image {
					background: #999999;
					width: 218rpx;

					height: 218rpx;
				}

				view {
					height: 72rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #111111;
					line-height: 72rpx;
					text-indent: 10rpx;
				}
			}

			.btn {
				width: 218rpx;
				height: 60rpx;
				background: #C7A46F;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-top: 24rpx;
			}
		}
	}


	.cttit {
		margin-top: 36rpx;
		margin-left: 56rpx;
		position: relative;
		display: flex;
		flex-direction: column;

		// align-items: center;
		&>text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #111111;
			position: relative;
			z-index: 10;
		}

		view {
			width: 130rpx;
			height: 16rpx;
			border-radius: 20rpx;
			background: #EDE7DB;
			position: absolute;
			bottom: -6rpx;
		}
	}

	.bgbg {
		width: 100%;
		height: 428rpx;
		position: relative;
		padding: 1rpx;
		box-sizing: border-box;

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			z-index: 1;
			top: 0;
		}

		.jz {
			width: 140rpx;
			height: 60rpx;
			background: #C7A46F;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			color: #fff;
			position: relative;
			z-index: 2;
			margin-top: 280rpx;
			margin-left: 580rpx;
		}
	}

	.contentinfo {
		position: absolute;
		width: 690rpx;
		margin-left: 30rpx;
		height: auto;
		top: 380rpx;
		z-index: 2;
		background: #fff;
		box-shadow: 5rpx 0rpx 15rpx 0rpx rgba(0, 0, 0, 0.3);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		box-sizing: border-box;
		padding: 24rpx;

		.title {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			margin-bottom: 10rpx;
		}

		.ctinfo {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			line-height: 36rpx;
		}
	}

	.contentinfo2 {
		position: relative;
		top: 0;
		opacity: 0;
	}
</style>